import { Input, Form, Button, message } from 'antd'
import { tologin, addLoginLog } from '../../api/login/index'
import { useNavigate, Navigate } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import './login.css'
import { changeRoute, myRoute, changeUsername } from '../../store/reducers/route'
import dayjs from 'dayjs'

function Login() {
    const [form] = Form.useForm()
    const nagivate = useNavigate()
    const dispatch = useDispatch()
    // 在登录页面判断，如果存在 token, 就重定向至 Home 页面
    if (localStorage.getItem('admin-token')) {
        return (
            <Navigate to='/home' replace />
        )
    }
    function loginTo() {
        console.log('登录');
        form.validateFields().then(val => {
            if (!val.username || !val.password) {
                // 此时通过 message 组件的方式提示用户，账号和密码没有输入
                return message.open({
                    type: 'warning',
                    content: '账号和密码没有输入'
                })

            } else {
                // 获取 token 后登录， 但这里没有登录鉴权， 所以要通过重定向做一个判断
                tologin(val).then(res => {
                    if (res.code === 200) {
                        localStorage.setItem('admin-token', res.token)
                        // 获取ip地址等信息
                        fetch('https://api.ipify.org?format=json').
                            then(response => response.json()).
                            then(res1 => {
                                const ip = res1.ip
                                //通过ip地址获取所在地
                                fetch(`https://api.oioweb.cn/api/ip/ipaddress?ip=${ip}`).
                                    then((res2) => res2.json()
                                        .then((res3) => {
                                            const date = dayjs(new Date()).format('YYYY-MM-DD')
                                            let data = {
                                                username: res.username,
                                                identify: res.identify,
                                                ip: ip,
                                                address: res3.result.disp,
                                                loginTime: date
                                            }
                                            addLoginLog(data).then((res) => {
                                            })
                                        })
                                    )
                            })
                            .catch(error => { console.error(error) })
                        // 将username存入状态中
                        dispatch(changeUsername(res.username))
                        // 将 id 存入状态中
                        dispatch(changeRoute(res.identify))
                        // 调用 状态中获取路由列表的方法
                        dispatch(myRoute(res.identify))
                        // nagivate('/home')
                    } else {
                        message.open({
                            type: 'warning',
                            content: res.msg
                        })
                    }
                })
            }
        })
            .then(() => {
                setTimeout(() => {
                    nagivate('/home')
                }, 2000)
            })
    }
    return (
        <div className="login-container">
            <div className="login-title">登录</div>
            <div className="login-form">
                <Form
                    form={form}
                    /* 设置表单的布局，使用 grid 栅格布局 */
                    labelCol={{
                        span: 6
                    }}
                    wrapperCol={{
                        span: 18
                    }}
                    // 对齐方式
                    labelAlign='left'>
                    <Form.Item name="username" label='用户名'>
                        <Input className="login-input" placeholder="请输入用户名" />
                    </Form.Item>
                    <Form.Item name="password" label='密码'>
                        <Input.Password className="login-input" placeholder="请输入密码" />
                        {/* input 组件直接提供了 password 类型的输入框,和number是一个性质 */}
                    </Form.Item>
                </Form>
            </div>
            <div className="login-button">
                <Button onClick={loginTo} type='primary'>登录</Button>
            </div>
        </div>
    )
}

export default Login